<template>
  <div class="mind-container">
    <!-- GIF背景 -->
    <image 
      src="https://mp-f39cdfb0-3bad-46f3-8ee5-80ae6d91880d.cdn.bspapp.com/mp3/beijing.gif" 
      class="background-gif" 
      mode="scaleToFill"
      @load="handleGifLoad"
      :style="{opacity: gifLoaded ? 1 : 0}"
    />

    <!-- 加载状态 -->
    <div v-if="!gifLoaded" class="loading-text">
      <div class="loading-spinner"></div>
      星空加载中...
    </div>

    <!-- 动态球体 -->
    <div class="glowing-star" :class="{ shrink: started }">
      <div class="thought-text">{{ animatingThought }}</div>
    </div>

    <!-- 初始界面 -->
    <transition name="fade">
      <div v-if="!started && gifLoaded" class="star-content">
        <p class="prompt-text">写下让你烦恼的一件事：</p>
        <input 
          v-model="thought" 
          class="thought-input" 
          placeholder="在此输入..."
          @confirm="startMeditation"
          :focus="gifLoaded"
        />
        <button class="start-btn" @click="startMeditation">开始冥想</button>
      </div>
    </transition>

    <!-- 冥想提示 -->
    <transition name="fade-slide">
      <div 
        v-if="started" 
        class="meditation-text"
        :key="currentTipIndex"
      >
        <p>{{ currentTip }}</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thought: '',
      animatingThought: '',
      started: false,
      gifLoaded: false,
      meditationTips: [
        "深呼吸……让这颗烦恼的星球慢慢远离你。",
        "感受呼吸的节奏，让思绪如星光般消散",
        "宇宙广袤，此刻的烦恼只是沧海一粟",
        "想象自己漂浮在宁静的星河之中",
        "每一次呼气，都释放心中的重负"
      ],
      currentTipIndex: 0,
      tipInterval: null,
      audioContext: null,
      audioRetryCount: 0
    };
  },
  computed: {
    currentTip() {
      return this.meditationTips[this.currentTipIndex];
    }
  },
  methods: {
    handleGifLoad() {
      this.gifLoaded = true;
      wx.hideLoading();
    },

    startMeditation() {
      if (!this.thought.trim()) {
        wx.showToast({ 
          title: '请先输入内容', 
          icon: 'none',
          duration: 1500
        });
        return;
      }

      this.initAudio();
      
      this.animatingThought = this.thought;
      this.started = true;
      
      setTimeout(() => {
        this.startTipCycle();
      }, 3000);
    },

    initAudio() {
      if (!this.audioContext) {
        wx.showLoading({ 
          title: '准备音效...',
          mask: true
        });
        
        this.audioContext = wx.createInnerAudioContext();
        this.audioContext.src = 'https://mp-f39cdfb0-3bad-46f3-8ee5-80ae6d91880d.cdn.bspapp.com/mp3/10min正念冥想，停止内耗，舒缓焦虑，找回轻松心态.mp3';
        this.audioContext.loop = false;
        this.audioContext.autoplay = true;

        // 音频事件处理
        this.audioContext.onPlay(() => {
          console.log('音频开始播放');
          wx.hideLoading();
        });

        this.audioContext.onWaiting(() => {
          wx.showLoading({
            title: '缓冲中...',
            mask: true
          });
        });

        this.audioContext.onError((err) => {
          console.error('音频错误:', err);
          wx.hideLoading();
          
          if (this.audioRetryCount < 3) {
            this.audioRetryCount++;
            wx.showToast({
              title: `音频加载失败，重试中(${this.audioRetryCount}/3)`,
              icon: 'none',
              duration: 1500
            });
            setTimeout(() => this.audioContext.play(), 1000);
          } else {
            wx.showToast({
              title: '音频加载失败，请检查网络',
              icon: 'none',
              duration: 2000
            });
          }
        });

        this.audioContext.onEnded(() => {
          console.log('音频播放结束');
          this.started = false;
          this.thought = '';
          this.animatingThought = '';
          clearInterval(this.tipInterval);
        });
      }
    },
    
    startTipCycle() {
      this.currentTipIndex = 0;
      this.tipInterval = setInterval(() => {
        this.currentTipIndex = (this.currentTipIndex + 1) % this.meditationTips.length;
      }, 4000);
    }
  },
  beforeDestroy() {
    if (this.audioContext) {
      this.audioContext.stop();
      this.audioContext.destroy();
      this.audioContext = null;
    }
    clearInterval(this.tipInterval);
  }
};
</script>

<style scoped>
.mind-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  background: #0b1523;
  /* 新增定位基准 */
  position: relative; 
}

.background-gif {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: opacity 0.8s ease-out;
}

.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  text-align: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.glowing-star {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #f8f8f8 20%, #ff9933 100%);
  box-shadow: 0 0 50px 15px rgba(255, 153, 51, 0.6);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.glowing-star.shrink {
  animation: shrinkAndUp 622s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shrinkAndUp {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
  100% { transform: translate(-50%, -250vh) scale(0.1); opacity: 0; }
}

.star-content {
  position: absolute;
  z-index: 3;
  text-align: center;
  width: 100%;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
  /* 新增弹性布局容器 */
  display: flex;
  flex-direction: column;
  align-items: center;
}


.prompt-text {
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.thought-input {
  width: 70%;
  margin: 10px auto;  /* 双保险居中 */
  padding: 12px 15px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.thought-input:focus {
  outline: none;
  border-color: rgba(255, 153, 51, 0.5);
  box-shadow: 0 0 10px rgba(255, 153, 51, 0.3);
}

.start-btn {
  width: 200px;
  margin: 20px auto 0;
  padding: 12px 0;
  background: linear-gradient(135deg, #ff9933 30%, #ff6600 100%);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.start-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.start-btn:active {
  transform: scale(0.96);
}

.start-btn:active::after {
  opacity: 1;
}

.meditation-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  text-align: center;
  width: 80%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

.thought-text {
  color: #333;
  font-size: 16px;
  padding: 15px;
  text-align: center;
  width: 100%;
  line-height: 1.4;
  word-break: break-word;
}

/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.8s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-slide-enter-active {
  transition: all 0.5s ease;
}
.fade-slide-leave-active {
  transition: all 0.3s ease;
}
.fade-slide-enter {
  opacity: 0;
  transform: translateY(20px);
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

@media (max-height: 600px) {
  .star-content {
    top: 55%;
  }
  .glowing-star {
    width: 140px;
    height: 140px;
  }
  .thought-text {
    font-size: 14px;
    padding: 10px;
  }
  .meditation-text {
    font-size: 16px;
    top: 58%;
  }
}

@media (max-width: 375px) {
  .prompt-text {
    font-size: 16px;
  }
  .thought-input {
    width: 85%;
    font-size: 14px;
  }
  .start-btn {
    width: 180px;
    font-size: 15px;
  }
}
</style>